<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

  
  
  <div id="box2DIv" class="box2">
 
    <el-form label-position="right"   label-width="200px" :model="formInline" style="margin: 10vh;margin-top:5vh;width: 80%;float: left;text-align: left;" class="demo-form-inline">
      
      <el-row gutter="20"> 

        <el-col :span="12">
          <el-form-item label="项目启动年份：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.projectInitiationYear">
              </el-input>
          </el-form-item> 
        </el-col>

        <el-col :span="12">

          <el-form-item label="项目运行周期：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.projectOperationCycle">
                <template slot="append">年</template>
              </el-input>
          </el-form-item> 
        </el-col>  
        
      </el-row>

      <el-row gutter="20"> 
        <el-col :span="12">
          <el-form-item label="管道长度：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.pipeLength">
                <template slot="append">km</template>
              </el-input>
          </el-form-item> 
        </el-col>  
        <el-col :span="12">
          <el-form-item label="管材内径：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.pipeInner">
                <template slot="append">mm</template>
              </el-input>
          </el-form-item> 
        </el-col>  
        
      </el-row>
      
      
      <el-row gutter="20"> 
        <el-col :span="12">
          <el-form-item label="压缩机入口压力：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.inletPressure">
                <template slot="append">MPa</template>
              </el-input>
          </el-form-item> 
        </el-col>
        <el-col :span="12"> 
          <el-form-item label="管道输氢压力：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.pipelineHydrogenTransmissionPressure">
                <template slot="append">MPa</template>
              </el-input>
          </el-form-item> 
        </el-col>  
      </el-row>
 
 
      
      <el-row gutter="20"> 
        
        <el-col :span="12">
          <el-form-item label="用电价格：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.electricityPrices">
                <template slot="append">￥/ kWh</template>
              </el-input>
          </el-form-item> 
        </el-col>

        <el-col :span="12">
          <el-form-item label="管材价格：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.pipePrice">
                <template slot="append">￥/ km</template>
              </el-input>
          </el-form-item> 
        </el-col>

 

      </el-row>
      
      
      <el-row gutter="20"> 
        
        
        <el-col :span="12">
          <el-form-item label="购氢价格：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.purchasePriceHydrogen">
                <template slot="append">￥/ km</template>
              </el-input>
          </el-form-item> 
        </el-col>

               
        <el-col :span="12">
          <el-form-item label="售氢价格：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.hydrogenSalesPrice">
                <template slot="append">￥/ kg</template>
              </el-input>
          </el-form-item> 
        </el-col>


        
      </el-row>
      
      
      <el-row gutter="20"> 

        
        <el-col :span="12">
          <el-form-item label="建设期贷款比例：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.loan">
                <template slot="append">%</template>
              </el-input>
          </el-form-item> 
        </el-col>

        <el-col :span="12">
          <el-form-item label="贷款还款周期：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.loanRepaymentCycle">
                <template slot="append">年</template>
              </el-input>
          </el-form-item> 
        </el-col>

      
      </el-row>
      
      <el-row gutter="20"> 

                
        <el-col :span="12">
          <el-form-item label="贷款年利率：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.annualInterestRate">
                <template slot="append">%</template>
              </el-input>
          </el-form-item> 
        </el-col>

        
        <el-col :span="12">
          <el-form-item label="折现率：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.discountRate">
                <template slot="append">%</template>
              </el-input>
          </el-form-item> 
        </el-col>

      </el-row>

      <el-row gutter="20"> 

        <el-col :span="12">
            
          <el-form-item label="是否考虑通胀因素：">
              <el-radio-group style="text-align: left;margin-top: 1vh;" v-model="form.isInflationFactors">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
          </el-form-item> 
        </el-col>
     
        <el-col :span="12">
          <el-form-item v-if="form.isInflationFactors=='1'" label="通胀率：">
            <el-input style="width: 100%;margin-top: 0vh;" v-model="form.inflationRate">
                <template slot="append">%</template>
              </el-input>
          </el-form-item> 
        </el-col>
        
      </el-row>

    </el-form>

  </div>

  <div id="buttonDiv" style="position: absolute;top: 75vh;width: 98%;text-align: center;">
    <el-button type="primary" @click="savePageData()">
        <span class="button-text">保存</span>
    </el-button>
  </div>
 
</div>
  
</template>

<script>
 

  export default {
    name: 'parameterSettingsPht',
    data() {
      return {
        form: {
          id: '',
          projectId : "",
          projectInitiationYear: '',
          projectOperationCycle: '',
          pipeLength: '',
          pipeInner: '', 
          pipelineHydrogenTransmissionPressure: '', 
          inletPressure: '', 
          electricityPrices: '', 
          pipePrice : '',
          purchasePriceHydrogen: '',
          hydrogenSalesPrice: '',
          loan: '',
          loanRepaymentCycle: '',
          annualInterestRate: '',
          discountRate: '',
          isInflationFactors: '',
          inflationRate: '',

        },
        projectId : "",

      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.queryPageData();


    },
    methods: {
  

      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPageData?projectId='+this.projectId+"&tableName=pht_parameter_settings").then((res) => {
          var result = res.data.data;
          if(result){
            vm.form = result;
          }
        }).catch((error) => {
          console.log(error);
        });


      },
      
      savePageData : function(){
 
        var vm = this;
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/savePageData', {
          "pageData": JSON.stringify(this.form),
          "tableName":"pht_parameter_settings"
        }).then((res) => {

          if (res.data.flag) {
            vm.form.id = res.data.id;
            this.$message({
              type: 'success',
              message: res.data.message
            });

          } else {
            this.$message.error(res.data.message);
          }
        });

      },

    }
  }
</script>



<style>

.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  /* 设定地图的大小 */
  #allmap{
    height: 350px;
    width: 100%;
  }

  .buttonStyle {
    height: 4vh;
    width: 27vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    margin: auto;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box1{ 
    width: 96%;
    height: 30vh;
    margin-top: 1vh;
    margin: 0 auto;
    top: 18vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px;
    margin: auto;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box2{ 
    width: 96%;
    height: 64vh;
    margin-top: 1vh;
    margin: 0 auto;
    top: 10.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
